import { useState } from 'react'
import { List,Typography } from 'antd'
// import ItemCard from './ItemCard'
import { useChecked } from './use-checked'
import './cart.css'

// 
export interface CartItem {
  id:number;
  name:string;
  price:number;
}

const cartData = Array(5)
  .fill(undefined)
  .map((v,i) => ({
    id:i,
    name:'商品',
    price:Math.round(Math.random() * 100)
  }))

function App() {
  const total = 0;
  const footer = (
    <div className="footer">
      <div className="chexk-all">
        <input type="checkbox" />全选
      </div>
      <div>
        价格总计<Typography.Text>{total}</Typography.Text>
      </div>
    </div>
  )
  const {} = useChecked(cartData)
  return (
    <div className="App">
      <List
        header={<div>购物车</div>}
        footer={footer}
        bordered
        dataSource={cartData}
        renderItem={item => {
          return (
            <List.Item>
              <ItemCard item={item} checked={checked}
                onCheckChange={onCheckChange}/>
            </List.Item>
          )
        }}
      />
    </div>
  )
}

export default App
